<template>
<el-container>
    <!-- left side: setting -->
    <el-aside>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm" size="mini">
            <el-divider content-position="left">运行状态</el-divider>

            <el-form-item label="连接状态">
                <el-button type="text" size="mini">{{ status }}</el-button>
            </el-form-item>

            <!-- <el-button type="text" size="mini">运行时长: 0</el-button> -->

            <el-divider content-position="left">设备属性设置</el-divider>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="IP地址" prop="ipaddr">
                        <ip-input ref="getIP" :ipStr.sync="ipaddress"></ip-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="端口号" prop="port">
                        <el-input v-model="ruleForm.port"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="设备ID" prop="deviceid">
                        <el-input v-model="ruleForm.deviceid"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="采集周期(ms)" prop="time_interval">
                        <el-input v-model="ruleForm.time_interval"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-form-item>
                    <el-button type="primary" v-on:click="start_connmodbus">连接</el-button>
                    <el-button v-on:click="stop_connmodbus" plain>断开连接</el-button>
                </el-form-item>
            </el-row>

        </el-form>

        <el-form :model="ruleForm2" ref="ruleForm2" label-width="110px" class="demo-ruleForm" size="mini">
            <el-divider content-position="left">通道设置</el-divider>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="通道类型">
                        <el-select v-model="ruleForm2.func" placeholder="请选择通道类型">
                            <el-option label="[0区] 输出继电器" value="FC1"></el-option>
                            <el-option label="[1区] 输入继电器" value="FC2"></el-option>
                            <el-option label="[4区] 输出寄存器" value="FC3"></el-option>
                            <el-option label="[3区] 输入寄存器" value="FC4"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="数据类型">
                        <el-select v-model="ruleForm2.datatype" placeholder="请选择数据类型" disabled>
                            <el-option label="开关量" value="bool"></el-option>
                            <el-option label="32位 BCD" value="int"></el-option>
                            <el-option label="32位二进制" value="hex"></el-option>
                            <el-option label="ASCII字符串" value="string"></el-option>
                            <el-option label="32位浮点数" value="float"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="通道地址" prop="address">
                        <el-input v-model="ruleForm2.address"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="通道个数" prop="quantity">
                        <el-input v-model="ruleForm2.quantity"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="读写方式">
                        <el-radio-group v-model="ruleForm2.rw">
                            <el-radio label="ro">只读</el-radio>
                            <el-radio label="wo" disabled>只写</el-radio>
                            <el-radio label="rw" disabled>读写</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm2')">添加</el-button>
                    <el-button @click="resetForm('ruleForm2')">重置</el-button>
                </el-form-item>
            </el-row>
        </el-form>
    </el-aside>
    <!-- right side : table -->
    <el-main>
        <el-divider content-position="left">通道列表</el-divider>
        <datatable :watchdata="updatedata"></datatable>
    </el-main>
</el-container>
</template>

<style lang="scss">
.el-select {
    width: 100%;
}

.el-aside {
    width: 50% !important;
    min-width: 500px;
    padding: 0px 10px 0px 10px !important;
}

.el-main {
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    overflow: auto;
    box-sizing: border-box;
    padding: 0px 10px 0px 10px !important;
}

.demo-ruleForm {
    width: 100%;
    min-width: 460px;
}

.demo-ruleForm .line {
    text-align: center;
}
</style>

<script>
import IpInput from "./IpInput";
import datatable from "./datatable";
import {
    connect_to_slave,
    disconnect_to_slave
} from "@/components/js//ModbusRun";
import {
    findData,
    updateData,
    delData
} from "@/components/js/db";
import globalVariable from "@/components/js/Global";
export default {
    name: "Main",
    components: {
        IpInput,
        datatable
    },
    data() {
        return {
            ipaddress: "127.0.0.1",
            status: "",
            // connStatus: data(),
            ruleForm: {
                port: "502",
                time_interval: "1000",
                deviceid: "0"
            },
            ruleForm2: {
                func: "FC1",
                datatype: "bool",
                address: "0",
                quantity: "1",
                rw: "ro"
            },
            updatedata: {},
            rules: {
                ipaddr: [{
                    required: true,
                    message: "请输入有效IP",
                    trigger: "blur"
                }],

                deviceid: [{
                    required: true,
                    message: "有效的设备ID",
                    trigger: "blur"
                }],

                time_interval: [{
                    required: true,
                    message: "请输入有效的采集周期(ms)",
                    trigger: "blur"
                }],

                port: [{
                    required: true,

                    message: "请输入有效端口号[1~65535]",
                    trigger: "blur",
                    min: 1,
                    max: 65535
                }]
            }
        };
    },
    mounted() {
        findData({
            type: "conf"
        }).then(res => {
            console.log(res)
            res.forEach((item, index) => {
                let conf = item.conf;

                this.ipaddress = conf.slaveip
                this.ruleForm.port = conf.slaveport
                this.ruleForm.time_interval = conf.time_interval
                this.ruleForm.deviceid = conf.deviceid

            });
        });
        setInterval(this.my_conn, 3000);
    },
    methods: {
        my_conn() {
            this.status = globalVariable.ConnStatus;
        },
        stop_connmodbus() {

            disconnect_to_slave();
            this.status = "Stoped"
        },
        start_connmodbus() {
            var ipaddr = this.$refs.getIP.ipAdress;

            var ip =
                ipaddr[0].value +
                "." +
                ipaddr[1].value +
                "." +
                ipaddr[2].value +
                "." +
                ipaddr[3].value;
            var db = this.$db.cfg;

            var doc = {
                type: "conf",
                conf: {
                    slaveip: ip,
                    slaveport: this.ruleForm.port,
                    deviceid: this.ruleForm.deviceid,
                    time_interval: this.ruleForm.time_interval
                }

            };

            db.remove({
                type: "conf"
            }, {
                multi: true
            }, (err, doc) => {
                if (err) {
                    console.error(eer);
                    return;
                }
            });

            db.insert(doc, (err, newDoc) => {
                if (err) {
                    console.error(eer);
                    return;
                }
            });
            // connect_to_slave();
            connect_to_slave();
            // modbus_run(ip, this.ruleForm.port, db);
        },
        submitForm(formName) {
            var db = this.$db.cfg;
            this.$refs[formName].validate(valid => {
                //   console.log(this.ruleForm2);
                if (valid) {
                    var obj = {};
                    obj = JSON.parse(JSON.stringify(this.ruleForm2));

                    this.updatedata = obj;

                    // write to db
                    db.insert({
                        type: "channel",
                        channel: obj,
                        date: Date.now()
                    }, (err, doc) => {
                        if (err) {
                            console.error(eer);
                            return;
                        }
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
};
</script>
